<template>
	<view class="content">
		<view class="input-group">
			<view class="input-row border">
				<text class="title">
					<text class="requiedF">*</text>
					登录账号：
				</text>
				<m-input class="m-input" type="text" clearable focus v-model="username" placeholder="请输入登录账号"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">
					<text class="requiedF">*</text>
					企业名称：
				</text>
				<m-input class="m-input" type="text" clearable focus v-model="company_name" placeholder="请输入企业名称"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">
					<text class="requiedF">*</text>
					邮箱：
				</text>
				<m-input class="m-input" type="text" clearable focus v-model="email" placeholder="请输入邮箱"></m-input>
			</view>
			<view class="input-row border">
				<text class="title">手机号：</text>
				<m-input class="m-input" type="text" clearable focus v-model="phone" placeholder="请输入手机号"></m-input>
			</view>
			<view class="input-row">
				<text class="title">
					<text class="requiedF">*</text>
					密码：
				</text>
				<m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
			</view>
			<view class="input-row">
				<text class="title">
					<text class="requiedF">*</text>
					确认密码：
				</text>
				<m-input type="password" displayable v-model="repassword" placeholder="请输入确认密码"></m-input>

			</view>
		</view>
		<view class="btn-row">
			<button type="primary" class="primary" @tap="formSubmit" style="margin-bottom: 20rpx;">注册</button>
			<button type="default" form-type="reset" @tap="formReset">重置</button>
		</view>
		<view class="action-row">
			<navigator url="../login">登录</navigator>
			<text> | </text>
			<navigator url="../../form/form">员工健康打卡</navigator>
		</view>
	</view>
</template>



<style scoped>
	.title {
		font-size: 29rpx;
		width: 160rpx;
	}

	.requiedF {
		color: #FF3333;
	}

	.action-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.action-row navigator {
		color: #007aff;
		padding: 0 10px;
	}
</style>
<script>
	import mInput from '../../../components/m-input.vue'
	import {
		mapMutations
	} from 'vuex';
	export default {
		components: {
			mInput
		},
		data() {
			return {
				company_name: '',
				username: '',
				email: '',
				phone: '',
				password: '',
				repassword: ''
			}
		},
		methods: {
			...mapMutations(['login']),
			formSubmit: function() {
				if (this.username.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '请填写帐号'
					});
					return;
				}
				const zg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]*$/;
				if (!zg.test(this.username)) {
					uni.showToast({
						icon: 'none',
						title: '帐号需字母和数字组合'
					});
					return;
				}
				if (this.company_name.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '请填写企业名称'
					});
					return;
				}
				if (this.email.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '请填写邮箱地址'
					});
					return;
				}
				const emailReg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if (!emailReg.test(this.email)) {
					uni.showToast({
						icon: 'none',
						title: '邮箱地址不合法'
					});
					return;
				}
				if (this.phone && !(/^1[34578]\d{9}$/.test(this.phone))) {
					uni.showToast({
						icon: 'none',
						title: '手机号格式不合法'
					});
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码长度至少6位'
					});
					return;
				}
				if (this.repassword !== this.password) {
					uni.showToast({
						icon: 'none',
						title: '2次密码不一致'
					});
					return;
				}
				uni.showLoading({
					title: '注册中...'
				})
				uniCloud.callFunction({
					name: 'company_manager_reg',
					data: {
						username: this.username,
						company_name: this.company_name,
						email: this.email,
						phone: this.phone,
						password: this.password,
					}
				}).then((res) => {
					uni.hideLoading()
					// 注册失败
					if (res.result.status == 0) {
						uni.showToast({
							title: `${res.result.errorMsg}`,
							icon: "none"
						});
					}
					// 注册成功
					else {
						const userInfo = {
							company_no: this.username,
							department: "",
							username: this.username,
							company_name: this.company_name
						};
						this.login(userInfo);
						// 跳转到首页
						uni.showModal({
							content: `注册成功`,
							showCancel: false,
							success(res) {
								uni.reLaunch({
									url: '../../manager/stat/stat'
								});
							}
						})
					}
				}).catch((err) => {
					uni.hideLoading()
					uni.showModal({
						content: `登录失败，错误信息为：${err.message}`,
						showCancel: false
					})
					console.error(err)
				})
			},
			formReset: function(e) {
				this.username = '';
				this.company_name  = '';
				this.email = '';
				this.phone = '';
				this.password = '';
				this.repassword = '';
			}
		}
	}
</script>
